<html>
	<head>
		<title>PowerPoint Controller</title>
		<meta name="viewport" content="width=320; user-scalable=false" id="viewport"/>
		<script type="text/javascript">
			
			function $(d){return document.getElementById(d);} 
			
			function s(d){
				$(d).style.background='#eee';
				var x=new XMLHttpRequest();
				var f = function(){if(x.readyState == 4) $(d).style.background='#fafafa';}; 
				x.onreadystatechange = f; 
				x.open('GET','/'+d,true);
				x.send();
			}
			
			var cw=0;
			
			setInterval(function(){
				if(window.innerwidth != cw){ 
					cw = window.innerWidth;
					var o=(cw==320)?"profile":"landscape";
					document.body.setAttribute("orient",o);
					window.scrollTo(0,1);
				}},500);
		</script>
		<style>
			body{background:#fff;height:100px;} 
			div.a { cursor:pointer;float:left;margin:5px;border:1px solid black; background-color:#fafafa;width:140px;height:100px;padding-top:40px;text-align:center;}
			div.b {border:1px solid black;background-color:#fafafa;cursor:pointer;float:left;margin:5px;width:90px;height:50px;padding-top:20px;text-align:center;} 
			div.c {margin-top:15px;clear:both;} 
		</style>
	</head>
	<body>
		<div class="a" id="prev" onmousedown="s('prev');">Prev</div>
		<div class="a" id="fwd" onmousedown="s('fwd');">Fwd</div>
		<div class="c"></div>
		<div class="b" id="tab" onmousedown="s('tab');">Tab</div>
		<div class="b" id="click" onmousedown="s('click');">Click</div>
		<div class="b" id="pres" onmousedown="s('pres');">Pres</div>
		<div class="c"></div>
	</body>
</html>